<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            border: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .container {
            width: 100vw;
            height: 780px;
            min-width: 375px;
            margin: auto;
            /*height: 1250px;*/
            background: url('平台背景图层1@2x.png') no-repeat;
            background-size: 100% 100%;
            padding-top: 60px;
        }

        #elephant {
            width: 305px;
            height: 401px;
            background: url('矢量智能对象拷贝@2x.png') no-repeat;
            margin: auto;
            background-size: 100% 100%;
        }

        #yet {
            width: 593px;
            height: 88px;
            background: url('IOS下载拷贝@2x.png') no-repeat;
            background-size: 100% 100%;
            margin: 60px auto 32px;
        }

        #anzhuo {
            width: 593px;
            height: 88px;
            background: url('安卓下载@2x.png') no-repeat;
            background-size: 100% 100%;
            margin:  auto;
        }

        @media all and (min-width: 375px) and (max-width: 667px) {
            .container {
                width: 100vw;
                height: 100vh;
                padding-top: 50px;
            }
            #elephant {
                width: 305px;
                height: 401px;
                
            }
            #yet {
                width: 336px;
                height: 73px;
            }
            #anzhuo {
                width: 336px;
                height: 73px;
            }
        }
        @media all and (max-width: 375px) {
            .container {
                width: 100%;
                height: 110vh;
                padding-top: 20px;
            }
            #elephant {
                width: 305px;
                height: 401px;
            }
            #yet {
                width: 282px;
                height: 65px;
            }
            #anzhuo {
                width: 282px;
                height: 65px;
            }
        }
        
    </style>
</head>

<body>
    <article class="container">
        <div id="elephant"></div>
        <div id="yet"></div>
        <div id="anzhuo"></div>
    </article>
</body>

</html>


